<template>
  <div>
    <ElDivider>选项卡</ElDivider>
    <ElTable :data="widgetList" :show-header="false">
      <ElTableColumn prop="label" label="标签">
        <template #default="scope">
          <ElInput v-model="scope.row.label"></ElInput>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="action" label="操作" width="70px">
        <template #default="{ row }">
          <ElButton text type="danger" @click="handleDelete(row)">
            <Icon icon="delete"></Icon>
          </ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <div style="margin: 10px">
      <ElButton link type="primary" @click="handleNewItem">
        <Icon icon="plus"></Icon>
        <span>添加一项</span>
      </ElButton>
    </div>
  </div>
</template>

<script setup lang="ts" name="TabsOptionsEditor">
import { computed } from "vue";
import { ElDivider, ElTable, ElTableColumn, ElButton, ElInput } from "element-plus";
import { Icon } from "@/components/Icon";
import { generateId } from "../../util/common";
const props = defineProps({
  designer: {
    type: Object
  },
  selectedWidget: {
    type: Object
  }
});
const widgetList = computed(() => props.selectedWidget!.widgetList);
const handleDelete = row => {
  const toolbar = widgetList.value;
  for (let index = 0; index < toolbar.length; index++) {
    if (widgetList.value[index].id === row.id) {
      widgetList.value.splice(index, 1);
      break;
    }
  }
};
const handleNewItem = () => {
  widgetList.value.push({ id: "tab" + generateId(), label: "选项卡" + (widgetList.value.length + 1), widgetList: [] });
};
</script>

<style scoped></style>
